<!--
 * @Author: 张卓南
 * @Date: 2023-10-19 20:39:08
 * @LastEditTime: 2023-10-21 17:40:17
 * @Description: 
-->
<template>
    <van-tabbar style="padding-bottom: 24px;" active-color ='rgb(4, 174, 211)' v-model="active" @change="onChange" >
        <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
        <van-tabbar-item icon="chat">消息</van-tabbar-item>
        <van-tabbar-item icon="bars">交易记录</van-tabbar-item>
        <van-tabbar-item icon="manager">我的</van-tabbar-item>
</van-tabbar>
<Main v-if="active == '0'" />
<MessageCenter v-if="active == '1'" />
<Jiaoyimingxi v-if="active == '2'"/>
<Mine v-if="active == '3'"></Mine>

</template>
<script lang="ts" setup>

import { ref,onMounted } from 'vue';
import { showToast } from 'vant';
import Main from './main/Main.vue'
import MessageCenter from './messagecenter/Messagecenter.vue'
import Jiaoyimingxi from './jiaoyimingxi/Jiaoyimingxi.vue'
import Mine from "@/views/mine/index.vue";

let active = ref('0');
    const onChange = (index) => {
        active.value = index
        localStorage.setItem('activeTab',index || 0)
    };
    onMounted(() => {
        active.value = localStorage.getItem('activeTab') || '0'
}) 

</script>

<style lang="less" scoped>
:deep(.van-tabbar--fixed) {
  position: fixed !important;
}
</style>
